{include_core file="m/lib/header.html" center="center" title="商品评价"}
<style>
  .evaluate .evaluate-add .image-chunk{
    width:46px;
    height:46px;
    overflow: hidden;
    position: relative;
    float:left;
    margin-top: 14px !important;
    margin: 0px 5px 5px 0px;
    border:1px solid #d9d9d9;
  }
  .evaluate .evaluate-add .image-chunk img{
    width:100%;
    height: auto;
  }
  .evaluate .evaluate-add .image-chunk .close{
    display: block;
    position: absolute;
    top: 2px;
    right: 2px;
    background: url({$smarty.const.SITE_URL}/images/close3.png) no-repeat;
    width: 16px;
    height: 16px;
    z-index: 8;
    cursor: pointer;
    text-align: center;
  }
  .evaluate .evaluate-add .image-chunk:hover{
    border :1px solid #c50e1a;
  }
  .evaluate .evaluate-add .image-chunk .progress{
    position: absolute;
    bottom: 0px;
    left:0px;
    width:0px;
    height:5px;
    background: #05A;
    z-index:8;
  }
  .image-input{
    width: 48px;
    height: 48px;
    position: absolute;
    z-index: 88px;
    filter:alpha(opacity=0);
    -moz-opacity:0;
    opacity:0;
  }
</style>
<div class="evaluate">
  <div class="evaluate-box">
    <h2><img src="{_image($sku_snapshot_info.sku_cover)}"/></h2>
	<p>{$sku_snapshot_info.goods_title}</p>
  </div>
  <form action="{AnUrl('comment/save')}" method="post" id="form">
  	<input type="hidden" name="order_relation_id" class="js_id" value="{$order_relation_info.id}">
    <input type="hidden" name="comment_id" class="" value="{$comment_id}">
  <div class="evaluate-star">
    <div class="evaluate-num">
	  <span>评价：</span>
	  <div class="star-list">
	  	{for $a=1 to 5}
          <a href="javascript:void(0);" class="{if $a > $comment_info.star}star-curr{/if} js_star" data-num="{$a}"></a>
        {/for}
        <input type="hidden" name="star" value="{$comment_info.star}" class="js_checkStar">
	  </div>
	</div>
	<div class="evaluate-add js_imageDiv">
	  <textarea class="js_title" name="title" placeholder="写下购买体会或者使用过程中带来的帮助等，可以为其他小伙伴提供参考~">{$comment_info.title}</textarea>
	  	{$img = comment_helper::get_comment_img($comment_id)}
	  	{foreach $img as $k=>$v}
        <div data-name="{$v.file_name}" class="image-chunk" data-id="{$v.id}">
          <div class="close js_deleteImg"></div>
          <img src="{_image($v.path, 'small')}">
          <input type="hidden" name="image[]" value="{$v.id}">
          <div class="progress" data-size="103176" style="width: 0px;"></div>
        </div>
        {/foreach}
	  <div class="add-btn js_imageInput"><a href="javascript:void(0);"><input type="file" id="js_fileUpload" name="Filedata" accept="image/gif,image/jpg, image/png" data-url="{AnUrl("core/handler/file_uploader/uploadify")}"/><img src="{$smarty.const.STATIC_URL}/images/m2-images/add-2.png"/></a></div>
	</div>
  </div>
  <div class="evaluate-footer clearfix">
	<div class="evaluate-btn js_submit"><a href="javascript:void(0);" >评价</a></div>
  </div>
  </form>
</div>
{load_js file="jquery.ui.widget.js"}
{load_js file="jquery.iframe-transport.js"}
{load_js file="jquery.fileupload.js"}
<script>
  $(function(){
    // 图片上传
    $('#js_fileUpload').fileupload({
      dataType: 'json',
      //autoUpload: true,
      acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
      maxFileSize: 5000000,
      done : function(e, data){
        $('div[data-name="'+ data.result.file_name +'"]').data('id', data.result.id).attr('data-file', data.result.path);
        $('div[data-name="'+ data.result.file_name +'"]').find('input').val(data.result.id);
      },
      progressall:function(e, data){
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('.js_fileProgress').each(function(){
          var size = $(this).data('size');
          var progress = parseInt(data.loaded / size * 100, 10);
          $(this).css({ width:progress+'%' });
        });
        if (progress == 100) {
          $('.js_fileProgress').css({ width:'0px' }).removeClass('js_fileProgress');
        }
      }
    }).on('fileuploadadd', function (e, data) {
      var _this = $(this);
      $.each(data.files, function (index, file) {
        viewImage(file);
      });

      data.submit();
    });

	$('.js_star').click(function(){
		$(this).removeClass('star-curr').prevAll('.js_star').removeClass('star-curr');
		$(this).nextAll('.js_star').addClass('star-curr');
		$('.js_checkStar').val($(this).data('num'));
	})
	$('.js_submit').click(function(){
	    var star = $('.js_checkStar').val();
	    var title = $('.js_title').val();
	    var id = $('.js_id').val();
	    if (!id) {
	      return false;
	    }
	    
	    if (!star) {
	      showMsg('请选择星级');
	      return false;
	    }
	    if (!title) {
	      showMsg('请填写评论内容');
	      return false;
	    }

	    $('#form').submit();
	  })

    // 删除已上传图片
    $('body').on('click', '.js_deleteImg', function(){
      $(this).parent().remove();
    });

  });
  //取得文件名的后缀
  function getFileExt(fileName)
  {
    if (!fileName) {
      return '';
    }
    
    var _index = fileName.lastIndexOf('.');
    if (_index < 1) {
      return '';
    }
    
    return fileName.substr(_index+1);
  }
  // 是合格的文件名
  function isAllowFile(fileName, allowType)
  {
    var fileExt = getFileExt(fileName).toLowerCase();
    if (!allowType) {
      allowType = ['jpg', 'jpeg', 'png', 'gif'];
    }

    if ($.inArray(fileExt, allowType) != -1) {
      return true;
    }

    return false;
  }

  function viewImage(file, callback)
  {
    if (typeof FileReader == "undefined") {
      return false;
    }

    var f = file;

    if (!isAllowFile(f.name)) {
      showMsg("请上传常规格式的图片,如：jpg, png等");
      return false;
    }

    var reader = new FileReader();
    reader.onload = (function(theFile){
      return function (e) {
        var tmpSrc = e.target.result;
        if (tmpSrc.lastIndexOf('data:base64') != -1) {
          tmpSrc = tmpSrc.replace('data:base64', 'data:image/jpeg;base64');
        } else if (tmpSrc.lastIndexOf('data:,') != -1) {
          tmpSrc = tmpSrc.replace('data:,', 'data:image/jpeg;base64,');
        }

        var img = '<img src="' + tmpSrc + '" />';
        if ($('div[data-name="'+ f.name +'"]').length > 0) {
          $('div[data-name="'+ f.name +'"]').remove();
        }
        $('.js_imageInput').before('<div data-name="'+ f.name+'" class="image-chunk"><div class="close js_deleteImg"></div>'+img+'<div class="progress js_fileProgress" data-size="'+ f.size +'"><input type="hidden" name="image[]" value=""></div></div>');
        if (callback) callback(f);
      };
    })(f)
    reader.readAsDataURL(f);
  }
</script>
{include_core file="m/lib/footer.html"}